<template>
  <div class="fly-panel fly-panel-user" pad20>
    <div class="layui-tab layui-tab-brief" lay-filter="user" id="LAY_msg" style="margin-top: 15px;">
      <button
        class="layui-btn layui-btn-danger"
        id="LAY_delallmsg"
        @click="clearAll()"
        v-if="lists.length"
      >清空全部消息</button>
      <div id="LAY_minemsg" style="margin-top: 10px;">
        <div class="fly-none" v-if="!lists.length">您暂时没有最新消息</div>
        <ul class="mine-msg" v-else>
          <li v-for="item in lists" :key="'comments' + item._id">
            <blockquote class="layui-elem-quote">
              <router-link :to="{name: 'user', params: {uid: item.cuid._id}}">
                <cite>{{item.cuid.name}}</cite>
              </router-link>回复了您的文章
              <router-link :to="{name: 'detail', params: {tid: item.tid._id}}">
                <cite>{{item.tid.title}}</cite>
              </router-link>
            </blockquote>
            <div v-richtext="item.content"></div>
            <p>
              <span>{{ item.created | moment}}</span>
              <a
                href="javascript:;"
                class="layui-btn layui-btn-small layui-btn-danger fly-delete"
                @click="clear(item)"
              >删除</a>
            </p>
          </li>
        </ul>
        <el-pagination
          v-if="total > 0"
          @current-change="handleCurrentChange"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { getMsg, setMsg } from '@/api/user'
import Pagination from '@/components/modules/pagination/Index'
export default {
  name: 'user-msg',
  components: {
    'imooc-page': Pagination
  },
  data() {
    return {
      lists: [],
      page: 0,
      limit: 5,
      total: 0,
      isRepat: false,
      isEnd: false
    }
  },
  created() {
    this.getMsgAll()
  },
  computed: {
    ...mapState(['num'])
  },
  methods: {
    // 清除所有消息
    clearAll() {
      setMsg().then(res => {
        if (res.code === 200) {
          // 清空所有消息
          this.lists = []
          this.setMessage({ message: 0 })
          this.total = 0
        }
      })
    },
    // 清除特定消息
    clear(item) {
      setMsg({ id: item._id }).then(res => {
        if (res.code === 200) {
          // 设置特定消息已读
          // this.lists = []
          this.setMessage({ message: this.num.message - 1 })
          this.getMsgAll()
        }
      })
    },
    // 获取所有消息
    // getMsgAll() {
    //   getMsg({
    //     page: this.page,
    //     limit: this.limit
    //   }).then(res => {
    //     if (res.code === 200) {
    //       this.lists = res.data
    //       this.total = res.total
    //     }
    //   })
    // },
    async getMsgAll() {
      const res = await getMsg({ page: this.page, limit: this.limit })
      if (res.code === 200) {
        this.lists = res.data
        this.total = res.total
      }
    },

    // 分页改变
    handleCurrentChange(val) {
      this.page = val - 1
      this.getMsgAll()
    },
    ...mapMutations({
      setMessage: 'SET_MESSAGE'
    })
  }
}
</script>

<style lang="scss" scoped>
</style>
